<template>
  <div>
    <div style="height: 40px">
      <h1>挂号订单管理</h1>
    </div>
    <div style="width: 100%">
      <div class="shaixuan_1">
        &nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
      <div id="shaixuan_2">
        <span id="input">
          <el-input v-model="input" placeholder="输入订单号或用户名"></el-input>
        </span>

        <span id="one">
          <span class="demonstration">&nbsp;&nbsp;&nbsp;日期</span>
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </span>
        <div id="button">
          <el-button type="primary" @click="select()">筛选</el-button>
        </div>
      </div>
    </div>
    <div>
      <div class="shaixuan_1">
        &nbsp;
        <i class="iconfont icon-querylist"></i>
        <span slot="title">数据列表</span>
      </div>
      <div style="width: 85%">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待支付" name="second"></el-tab-pane>
            <el-tab-pane label="已完成" name="third"></el-tab-pane>
            <el-tab-pane label="已取消" name="fourth"></el-tab-pane>
            <el-tab-pane label="已退款" name="fifth"></el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <el-row>
        <el-row>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column
              prop="order_num"
              label="订单编号"
              align="center"
              width="80px"
            >
            </el-table-column>
            <el-table-column
              prop="submission_time"
              label="提交时间"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="name" label="用户名" align="center">
            </el-table-column>
            <el-table-column prop="doctor" label="医生" align="center">
            </el-table-column>
            <el-table-column prop="department" label="科室" align="center">
            </el-table-column>
            <el-table-column
              prop="registration_fee"
              label="挂号费"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="order_status"
              label="订单状态"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="" label="操作" align="center" >
              <template slot-scope="scope">
                <!-- scope里面记录了当前行的下标，数据 -->
                <el-button type="success" @click="info(scope)" size="mini" 
                  >查看订单</el-button>
              

              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>

      <div id="page">
        <pageinfo
          :num="pageinit.total"
          :currentPage="pageinit.currentPage"
          :pageSize="pageinit.pageSize"
          @changeSize="changeSize"
          @changeCurrent="changeCurrent"
        ></pageinfo>
        <el-dialog
          title="患者详情"
          :visible.sync="editFormVisible"
          width="60%"
          @click="closeDialog()"
        > 
          <!-- <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column prop="date" label="患者姓名" width="100">
            </el-table-column>
            <el-table-column prop="name" label="性别" width="100">
            </el-table-column>
            <el-table-column prop="address" label="年龄"> </el-table-column>
            <el-table-column prop="address" label="手机号"> </el-table-column>
            <el-table-column prop="address" label="病情描述"> </el-table-column>
            <el-table-column prop="address" label="就诊情况"> </el-table-column>
            <el-table-column prop="address" label="预约时间"> </el-table-column>
            <el-table-column prop="address" label="提交时间"> </el-table-column>
          </el-table> -->
          <div>
    <div>
      <el-descriptions title="挂号信息" v-for="(item,index) in guahaomessage" :key="index">
        <el-descriptions-item label="就诊时间">{{ordermessage.submission_time}}</el-descriptions-item>
        <el-descriptions-item label="就诊医院">{{guahaomessage[index].hospital}}</el-descriptions-item>
        <el-descriptions-item label="科室">{{guahaomessage[index].department}}</el-descriptions-item>
        <!-- <el-descriptions-item label="医生">{{guahaomessage[index].name}}</el-descriptions-item> -->
        <el-descriptions-item label="医生职称">{{guahaomessage[index].professionalTitle}}</el-descriptions-item>
        <el-descriptions-item label="医事服务费">{{ordermessage.amount_payable}}</el-descriptions-item>
        <el-descriptions-item label="挂号单号">{{ordermessage.order_num}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <br>
    <br>
    <div>
      <el-descriptions title="订单信息">
        <el-descriptions-item label="订单编号">{{ordermessage.order_num}}</el-descriptions-item>
        <el-descriptions-item label="状态" v-if="ordermessage.order_status==0">待支付</el-descriptions-item>
         <el-descriptions-item label="状态" v-if="ordermessage.order_status==1">已完成</el-descriptions-item>
          <el-descriptions-item label="状态" v-if="ordermessage.order_status==2">已取消</el-descriptions-item>
           <el-descriptions-item label="状态" v-if="ordermessage.order_status==3">已退款</el-descriptions-item>
        <el-descriptions-item label="应付金额">{{ordermessage.amount_payable}}</el-descriptions-item>
        <el-descriptions-item label="优惠券">{{ordermessage.coupon}}</el-descriptions-item>
        <el-descriptions-item label="实际支付">{{ordermessage.actual_pay}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ordermessage.submission_time}}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ordermessage.pay_method}}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ordermessage.pay_time}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <br>
    <br>
    <div>
      <el-descriptions title="就诊人信息">
        <el-descriptions-item label="姓名">{{patientmessage.name}}</el-descriptions-item>
        <el-descriptions-item label="性别" v-if="patientmessage.gender==0">男</el-descriptions-item>
        <el-descriptions-item label="性别" v-if="patientmessage.gender==1">女</el-descriptions-item>
        <el-descriptions-item label="年龄">{{patientmessage.age}}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{patientmessage.telphone}}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog">关闭</el-button>
          </div>
        </el-dialog> 
      </div>
    </div>
  </div>
</template>

<script>
name: "GuahaoOrder";
import pageinfo from "@/components/guahao-order/pageinfo.vue";
export default {
  components: {
    pageinfo,
  },
  name: "GuahaoOrder",
  data() {
    return {
      guahaomessage: '',
      ordermessage: '',
      patientmessage: '',
      editFormVisible: false, //控制编辑页面显示与隐藏
      activeName: "first",
      input: "",
      value:'',
      tableData: "",
      pageinit: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      obj:{
        start:'',
        end:'',
        order_num:'',
        name:'',
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      alert(tab.index);
      if (tab.index == 0) {
        this.created();
      } else {
         let staus=tab.index
        this.$axios
          .get("http://localhost:12306/order/registeredorder/findByStatus/" + staus)
          .then((res) => {
            console.log(res.data.data);
             let numdata=res.data.data
         for(const i in numdata){
              if(numdata[i].order_status==0){
                 numdata[i].order_status="待支付"
              }else if(numdata[i].order_status==1){
                   numdata[i].order_status="已完成"
              }
         }
            this.tableData = res.data.data;

          });
      }
    },
        //子传父的方法值
      changeSize(val) {
        this.pageinit.pageSize = val;
        this.pageinit.currentPage = 1;
        // 重新调用获取数据方法
        this.created();
      },
      changeCurrent(val) {
        this.pageinit.currentPage = val;
        // 重新调用获取数据方法
        this.created();
      },
    select() {
      this.obj.start = this.value[0]
      this.obj.end = this.value[1]
      this.obj.order_num=this.input
      this.obj.name=this.input
      this.$axios
        .post("http://localhost:12306/order/registeredorder/search",this.obj)
        .then((res) => {
          
          this.tableData = res.data.data;
          this.pageinit.total=res.data.data.length;
          console.log(this.tableData);
        });
    },
    created() {
      this.$axios
        .get("http://localhost:12306/order/registeredorder/findAll/"+ this.pageinit.currentPage +
              "/" +
              this.pageinit.pageSize)
        .then((res) => {
          console.log(res.data.data);
          this.tableData = res.data.data.list;
          this.pageinit.total = res.data.data.total;
          let numdata=res.data.data.list
         for(const i in numdata){
              if(numdata[i].order_status==0){
                 numdata[i].order_status="待支付"
              }else if(numdata[i].order_status==1){
                   numdata[i].order_status="已完成"
              }
         }
          
   
        });
    },
    info(scope) {
      this.editFormVisible = true;
      alert(scope.row.doctor);
       this.$axios .get('/order/findDoctorByName/'+ scope.row.doctor) .then((res) => {
          this.guahaomessage = res.data.data
          console.log('挂号信息：',this.guahaomessage);
        })
      this.$axios
        .get('/order/registeredorder/findByNo/' + scope.row.order_num)
        .then((res) => {
          console.log(res)
          this.ordermessage = res.data.data
        })
      this.$axios
        .get('/order/user/findByName/'+scope.row.name)
        .then((res) => {
          console.log(res)
          this.patientmessage=res.data.data
          console.log(this.patientmessage);
        })
    },

    closeDialog() {
      this.editFormVisible = false;
    },
    
  },
  created() {
    this.created();
  },
 
};
</script>

<style scoped>
.shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#one {
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
</style>
